<template>
  <div class="register">
    <div class="panel-middle">
      <div class="tips">
        <h2>注册账号</h2>
      </div>
      <group gutter="0" class="input-group">
        <x-input class="input" ref="input01" @on-blur="onBlur1" :max="13" is-type="china-mobile" required placeholder="请输入手机号" v-model="phone"></x-input>
        <x-input class="weui-vcode input" ref="input02" @on-blur="onBlur2" is-type="number" :min="4" :max="6" placeholder="请输入验证码" required v-model="code">
          <span @click="sendCode" slot="right" class="code-btn">{{ codeTxt }}</span>
        </x-input>
        <x-input class="input" ref="input03" @on-blur="onBlur3" type="password" :min="6" :max="20" required placeholder="请输入密码(最少6位)" v-model="password"></x-input>
      </group>
      <div class="submit-btn">
        <x-button style="border-radius: 30px;" :gradients="['#FF2719', '#FF61AD']" @click.native="register">注册</x-button>
      </div> 
      <div class="link-flex">
        <router-link :to="{ path: '/login' }">已有账号？<span>立即登录</span></router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { XInput, Group, Cell, XButton } from 'vux'
import http from '@/utils/http'
var maxTime = 60
var currentTime = maxTime
export default {
	components: {
    XInput,
    Group,
    Cell,
    XButton
	},
  data () {
    return {
      phone: null,
      password: null,
      code: null,
      isPhone: false,
      isPassword: false,
      isCode: false,
      number: currentTime
    }
  },
  computed: {
    codeTxt () {
      if (this.number == maxTime) return '获取验证码'
      return this.number+'s后重发' 
    },
    isSend () {
      if (this.codeTxt == '获取验证码') return true
      return false  
    }
  },
  methods: {
  	routerBack () {
  		this.$router.go(-1)
  	},
    onBlur1 (value,$event) {
      this.isPhone = this.$refs.input01.valid
    },
    onBlur2 (value,$event) {
      this.isPassword = this.$refs.input02.valid
    },
    onBlur3 (value,$event) {
      this.isCode = this.$refs.input03.valid
    },
    toastFn (text) {
      this.$vux.toast.show({
        text,
        type,
        width: 'auto',
        position: 'middle'
      })
    },
    // 注册提交
    register () {
      let that = this
      let params = {
        phone: this.phone, // 提交的手机号
        code: this.code,
        password: this.password
      }  
      if (!this.phone) {
        that.toastFn('请输入手机号!', 'warn')
        return;
      }else if (!this.password) {
        that.toastFn('请输入你的密码!', 'warn')
        return;
      }else if (!this.isPhone) {
        that.toastFn('手机号格式有误!', 'warn')
        return;
      }else if (!this.isPassword) {
        that.toastFn('密码不得小于六位!', 'warn')
        return;
      }else if (!this.code) {
        that.toastFn('请输入验证码!', 'warn')
        return;
      }else if (!this.isCode) {
        that.toastFn('验证码格式有误!', 'warn')
        return;
      }
      http.post('/api/v1/register', params, false, res => {
        if (res.status == 1) {
          that.toastFn('注册成功!', 'success')
          setTimeout(() => {
            that.$router.push({ path: '/login' })
          }, 2000)
        }else {
          that.toastFn(res.msg, 'warn')
        }
      })
    },
    countDown () {
      let that = this
      if (!this.isSend) return
      currentTime = maxTime 
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        currentTime--
        this.number = currentTime
        if (currentTime <= 0) {
          clearInterval(this.timer)
          this.number = maxTime
        }
      },1000)
      
    },
    sendCode () {
      // 发送短信验证码
      var that = this;
      let params = {
        phone: this.phone, // 提交的手机号
      };
      http.post('http://localhost:3000/api/v1/sendsms', params, false, res => {
        if (res.status == 1) {
          that.countDown();
          that.toastFn('发送成功!', 'success')
        }else {
          that.toastFn(res.msg, 'warn')
        }
      })
    }
  }
}
</script>

<style scoped>
.register {
	position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25% 15px 0 15px;
}
.panel-middle {
  width: 100%;
}
.tips {
  padding: 0 15px;
  text-align: center;
  padding-bottom: 15px;
}
.tips h2 {
  font-size: 30px;
}
.input {
  color: #666;
  padding: 15px;
}
.input-group {
  border-radius: 3px;
  overflow: hidden;
}
.input-group:after,
.input:before {
  left: 15px !important;
  right: 15px !important;
}
.submit-btn {
  margin: 5px 0 0 0;
  padding: 15px;
}
.link-flex {
  text-align: center;
  color: #333;
  color: #787878;
  font-size: 12px;
}
.link-flex a {
  color: #787878;
  padding: 0 5px;
}
.link-flex a span {
  color: #fd4257;
}
</style>
